import React, { useState } from 'react'
import { Layout, Menu, Breadcrumb } from 'antd';
import { Route } from "react-router-dom";
import {
  PieChartOutlined,
  FileOutlined,
  UserOutlined,
} from '@ant-design/icons';
import '../styles/AdminIndex.css'
import AddArticle from './AddArticle'
import ArticleList from './ArticleList';

const { Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

const AdminIndex = (props) =>  {
// 导航收起 打开
const [collapsed, setCollapsed] = useState(false)
const onCollapse = collapsed => {
  setCollapsed(collapsed)
}

const handleClickArticle = e => {
  // console.log(e.item.props)
  if(e.key === 'addArticle') {
    props.history.push('/index/add')
  } else {
    props.history.push('/index/list')
  }
}

return (
  <Layout style={{ minHeight: '100vh' }}>
    <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
      <div className="logo" />
      <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
        <Menu.Item key="1" icon={<PieChartOutlined />}>工作台</Menu.Item>
        {/* <Menu.Item key="2" icon={<DesktopOutlined />}>添加文章 </Menu.Item> */}
        <SubMenu
          key="sub1"
          icon={<UserOutlined />}
          title="文章管理"
          onClick={handleClickArticle}
        >
          <Menu.Item key="addArticle">添加文章</Menu.Item>
          <Menu.Item key="articleList">文章列表</Menu.Item>
        </SubMenu>
        {/* <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
          <Menu.Item key="6">Team 1</Menu.Item>
          <Menu.Item key="8">Team 2</Menu.Item>
        </SubMenu> */}
        <Menu.Item key="5" icon={<FileOutlined />}>
          留言管理
        </Menu.Item>
      </Menu>
    </Sider>
    <Layout>
      <Content style={{ margin: '0 16px' }}>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>后台管理系统</Breadcrumb.Item>
          <Breadcrumb.Item>工作台</Breadcrumb.Item>
        </Breadcrumb>
        <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
          <div>
            <Route path="/index/" exact component={ AddArticle }/>
            <Route path="/index/add/" exact component={ AddArticle }/>
            <Route path="/index/list/" exact component={ ArticleList }/>
            <Route path="/index/add/:id" exact component={ AddArticle }/>
          </div>
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>chung4real.github.io</Footer>
    </Layout>
  </Layout>
  )
}

export default AdminIndex